<template>
  <div>
    <!-- 顶部分类 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/User' }">用户管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 输入框box-->
    <div class="inputbox">
      <el-button
        @click="fnshow()"
        plain
        size="medium"
      >添加</el-button>
      <!-- 输入框input-->
      名称: <el-input
        class="searchinput"
        v-model="keyword"
        placeholder="请输入内容"
        size="medium"
        @input="searchcon"
      >
        <!-- 搜索 -->
        <el-button
          icon="el-icon-search"
          slot="append"
          @click="searchcon"
        ></el-button>
      </el-input>
    </div>
    <!-- 表格 -->
    <el-table
      :data="tableData"
      border
      stripe
      v-loading="isloading"
      :height="listHeight"
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column
        prop="UserName"
        label="用户名"
      > </el-table-column>
      <el-table-column
        prop="UserPwd"
        label="密码"
      > </el-table-column>
      <el-table-column
        prop="Email"
        label="邮箱"
      > </el-table-column>
      <el-table-column
        label="操作"
        width="200"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.row)"
          >编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.Id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加的表单 -->
    <el-dialog
      title="添加分类"
      :visible.sync="showfrom"
      width="550px"
    >
      <el-form
        :rules="rules"
        ref="Form1"
        :model="ruleForm"
        label-width="80px"
      >
        <el-form-item
          label="用户名"
          prop="UserName"
        >
          <el-input
            v-model="ruleForm.UserName"
            placeholder="请输入内容"
            class="addinput"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          prop="UserPwd"
        >
          <el-input
            v-model="ruleForm.UserPwd"
            placeholder="请输入内容"
            class="addinput"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="邮箱"
          prop="Email"
        >
          <el-input
            v-model="ruleForm.Email"
            placeholder="请输入内容"
            class="addinput"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm()"
          >确定</el-button>
          <el-button @click="showfrom = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 编辑的表单 -->
    <el-dialog
      title="编辑分类"
      :visible.sync="showfrom2"
      width="550px"
    >
      <el-form
        :rules="rules"
        ref="Form2"
        :model="ruleForm2"
        label-width="80px"
      >
        <el-form-item label="封面">
          <el-upload
            class="avatar-uploader"
            action="/api/File"
            :show-file-list="false"
            :on-success="handleCoverSuccessEidt"
          >
            <img
              v-if="imageUrlEidt"
              :src="imageUrlEidt"
              class="avatar"
            >
            <i
              v-else
              class="el-icon-plus avatar-uploader-icon"
            ></i>
          </el-upload>
        </el-form-item>
        <el-form-item
          label="分类名称"
          prop="Name"
        >
          <el-input
            v-model="ruleForm2.Name"
            placeholder="请输入内容"
            class="addinput"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm2()"
          >确定</el-button>
          <el-button @click="showfrom2 = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 分页 -->
    <el-pagination
      background
      :page-size.sync="pagesize"
      :current-page.sync="pagesindex"
      layout="->,total, prev, pager, next, jumper"
      :total="totalcount"
      @current-change="handleCurrent"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      headers: {},
      // 默认表格高度
      listHeight: 500,
      // 添加时图片
      imageUrl: "",
      // 编辑时图片
      imageUrlEidt: "",
      // 是否加载
      isloading: false,
      // 对话框显示与隐藏
      showfrom: false,
      showfrom2: false,
      // input关键字
      keyword: "",
      // 总记录条数
      totalcount: 0,
      // 显示的条数
      pagesize: 10,
      // 当前页面
      pagesindex: 1,
      // 数据
      tableData: [],
      // 添加内数据绑定
      ruleForm: {
        UserName: "",
        UserPwd: "",
        Email: "",
      },
      // 编辑内数据绑定
      ruleForm2: {
        Id: "",
        Cover: "",
        Name: "",
      },
      // 校验添加内的input框
      rules: {
        UserName: [
          {
            required: true,
            message: "请输入分类名称",
            trigger: "blur",
          },
          {
            min: 2,
            max: 6,
            message: "长度在 2 到 6个字符",
            trigger: "blur",
          },
        ],
        UserPwd: [
          {
            required: true,
            message: "请输入分类名称",
            trigger: "blur",
          },
          {
            min: 2,
            max: 6,
            message: "长度在 2 到 6个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    // 成功时弹窗
    Alertsuccess(msg) {
      this.$message({
        message: msg,
        type: "success",
        duration: "3000",
      });
    },
    // 失败时弹窗
    AlertError(msg) {
      this.$message({
        message: msg,
        type: "error",
        duration: "3000",
      });
    },
    // 获取列表
    getList() {
      this.isloading = true;
      this.axios
        .get("/api/User", {
          params: {
            keyword: this.keyword,
            pageSize: this.pagesize,
            pageIndex: this.pagesindex,
          },
          headers: {
            auth: localStorage.getItem("token"),
          },
        })
        .then((res) => {
          this.isloading = false;
          if (res) {
            this.tableData = res.Data.List;
            // console.log(this.tableData);
            this.totalcount = res.Data.Count;
          }
        })
        .catch((err) => {
          this.isloading = false;
          console.log(err);
        });
    },
    // 点击添加的时候显示
    fnshow() {
      this.showfrom = true;
      this.ruleForm = {};
    },
    //添加
    submitForm() {
      this.$refs.Form1.validate((valid) => {
        if (valid) {
          this.ruleForm.Cover = this.imageUrl;
          this.axios
            .post("/api/User", this.ruleForm)
            .then((res) => {
              this.showfrom = false;
              if (res) {
                this.Alertsuccess(res.Message);
              }
              // 重新加载
              // this.getList();
            })
            .catch((err) => {
              console.log(err);
            });
        }
      });
    },
    // 添加时的图片上传
    handleCoverSuccess(res) {
      if (res.Code == "000000") {
        this.imageUrl = "/Upload/" + res.Data;
      }
    },
    // 点击修改
    handleEdit(row) {
      this.showfrom2 = true;
      this.ruleForm2.Id = row.Id;
      this.ruleForm2.Name = row.Name;
      this.imageUrlEidt = row.Cover;
    },
    // 确定修改
    submitForm2() {
      this.$refs.Form2.validate((valid) => {
        if (valid) {
          this.ruleForm2.Cover = this.imageUrlEidt;
          this.axios
            .put("/api/User", this.ruleForm2)
            .then((res) => {
              this.showfrom2 = false;
              if (res) {
                this.pagesindex = 1;
                this.Alertsuccess(res.Message);
                // 重新加载
                this.getList();
              }
            })
            .catch((err) => {
              console.log(err);
            });
        }
      });
    },
    // 编辑时的图片上传
    handleCoverSuccessEidt(res) {
      if (res.Code == "000000") {
        this.imageUrlEidt = "/Upload/" + res.Data;
      }
    },
    // 删除
    handleDelete(id) {
      this.axios
        .delete("/api/User/" + id)
        .then((res) => {
          if (res) {
            this.Alertsuccess(res.Message);
            this.getList();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 分页
    handleCurrent() {
      // this.pagesindex = currentPageindex;
      this.getList();
    },
    // 查询
    searchcon() {
      // console.log(111);
      this.pagesindex = 1;
      this.getList();
    },
  },
  // 创建
  created() {
    this.listHeight = window.innerHeight - 290 + "px";
    this.headers.auth = localStorage.getItem("token");
  },
  // 挂载
  mounted() {
    // 获取列表
    this.getList();
  },
};
</script>

<style scoped>
/* 输入框box */
.inputbox {
  margin-top: 10px;
}
/* 输入框 */
.searchinput {
  width: 400px;
  padding: 10px 10px;
}
/* 列表表格 */
.el-table {
  margin-top: 20px;
}
/* 分页选项 */
.el-pagination {
  margin-top: 20px;
}
/* 添加里面input框长度 */
.addinput {
  width: 360px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>